import React, {Component} from "react";
import {Link, withRouter} from "react-router-dom";
import {Table, Button, Tag, Rate, Modal, Input, message} from "antd";
import "./InstructionList.scss";

class InstructionList extends Component {
  input = React.createRef();
  state = {
    columns: [
      {
        title: "创建时间",
        dataIndex: "create_at",
        key: "create_at"
      },
      {
        title: "需求类型",
        dataIndex: "type",
        key: "type",
        render: (text, data) => {
          return (
            <>
              {
                <>
                  <Tag color="blue" style={{display: data.type == 1 ? "" : "none"}}>物料需求单</Tag>
                  <Tag color="purple" style={{display: data.type == 2 ? "" : "none"}}>虚拟商品需求单</Tag>
                  <Tag color="gold" style={{display: data.type == 3 ? "" : "none"}}>实体商品需求单</Tag>
                </>
              }
            </>
          );
        }
      },
      {
        title: "需求单号",
        dataIndex: "code",
        key: "code"
      },
      {
        title: "申请人",
        dataIndex: "applicant",
        key: "applicant"
      },
      {
        title: "优先级",
        dataIndex: "level",
        key: "level",
        render: (text, data) => {
          return (
            <Rate style={{color: "red"}} value={data.level} count={3} disabled/>
          );
        }
      },
      {
        title: "已读/未读",
        dataIndex: "is_view",
        key: "is_view",
        render: (text, data) => {
          return (
            <>
              {
                data.is_view === 1 ? <Tag color="cyan">已 读</Tag> : <Tag color="red">未 读</Tag>
              }
            </>
          );
        }
      },
      {
        title: "操作",
        key: "action",
        render: (text, action,index) => (
          <div className='btn-group'>
            <Link to={{pathname: `/instructionDetails/${`{"id":${action.id},"type":${action.type}}`}`}}
                  target="_blank">
              <Button
                size='small'
                type="primary"
                onClick={this.props.tempInitPages}
              >
                详情
              </Button>
            </Link>
            {
              action.status === 0 && (
                <>
                  <Button size='small' type="primary" ghost
                          onClick={() => this.props.instructionAgree(action,index)} loading={this.props.loadingArr[index]}>同意</Button>
                  {/*<Button size='small' type="danger" ghost*/}
                  {/*onClick={() => this.props.instructionReject(action)}>驳回</Button>*/}
                  <Button size='small' type="danger" ghost
                          onClick={() => this.showModal(action)}>驳回</Button>
                </>
              )
            }
            {
              action.status === 1 && (
                <Tag color="cyan">已同意</Tag>
              )
            }
            {
              action.status === 2 && (
                <Tag color="magenta">已驳回</Tag>
              )
            }

          </div>
        )
      }
    ],
    visible: false,
    id: ""
  };


  // 详情
  instructionDetails = action => {
    console.log(action);
  };


  showModal = ({id}) => {
    this.setState({
      visible: true,
      id
    });
  };

  handleOk = e => {
    e.preventDefault();
    if (this.input.current.state.value) {
      let msg = this.input.current.state.value;

      this.props.instructionReject(this.state.id, msg).then(res => {
        this.setState({
          visible: false
        });
      }).catch(err => {
        console.log(err);
      });

      // 驳回接口
    } else {
      message.error("请填写您的驳回理由...");
    }


  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false
    });
  };


  render() {
    const {data} = this.props;
    const tempData = data.length && data.map(item => {
      return {
        ...item,
        key: item.id
      };
    });

    return (
      <div className='InstructionList'>
        <Table columns={this.state.columns} dataSource={tempData} pagination={false}/>
        <Modal
          title="请填写您的驳回理由"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Input placeholder="驳回理由不能为空..." ref={this.input}/>
        </Modal>
      </div>
    );
  }
}

export default withRouter(InstructionList);
